<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/Views/Admin/css/themes/default/easyui.css" />
<script type="text/javascript" src="/Views/Admin/js/jquery.min.js"></script>
<script src="/Views/Exam/layer-v2.2/layer/layer.js"></script>
<script type="text/javascript"
	src="/Views/Admin/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/Views/Exam/echart/echarts.js"></script>
</head>

<body>


	<div style="width: 100%; height: 500px;">
		<div
			style="width: 50%; height: 500px;  float: left;">
			<div id="p" class="easyui-panel" title="试题分布"
				style="width: 520px; height: 480px; padding: 10px; background: #fafafa; float: left;"
				data-options="iconCls:'icon-save',closable:false,
        collapsible:true,minimizable:false,maximizable:false">
				<div id="left" style="width: 480px; height: 460px;"></div>
			</div>
		</div>
		<div
			style="width: 50%; height: 500px;  float: right;">
						<div id="p" class="easyui-panel" title="试题分布"
				style="width: 520px; height: 500px; padding: 10px; background: #fafafa; float: left;"
				data-options="iconCls:'icon-save',closable:false,
        collapsible:true,minimizable:false,maximizable:false">
				<div id="left1" style="width: 480px; height: 460px;"></div>
			</div>
			</div>
	</div>

	<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart1 = echarts.init(document.getElementById('left'));
	var myChart2 = echarts.init(document.getElementById('left1'));
	
	$(document).ready(function() {
		$.ajax({
			type:"post",
			url:"/exam/findError",
			async:true,
			success:function(data){

				option = {
//						title : {
//							text : '某站点用户访问来源',
//							subtext : '纯属虚构',
//							x : 'center'
//						},
						tooltip : {
							trigger : 'item',
							formatter : "{a} <br/>{b} : {c} ({d}%)"
						},
						legend : {
							orient : 'vertical',
							left : 'left',
							data : [ '道路交通安全法律、法规和规章', '交通信号', '安全行车、文明驾驶基础知识', '机动车驾驶操作相关基础知识' ]
						},
						series : [ {
							name : '试题信息',
							type : 'pie',
							radius : '55%',
							center : [ '50%', '60%' ],
							data : data,
							itemStyle : {
								emphasis : {
									shadowBlur : 10,
									shadowOffsetX : 0,
									shadowColor : 'rgba(0, 0, 0, 0.5)'
								}
							}
						} ]
					};
				myChart1.setOption(option);
			},
			error:function(data){
				
			}
		});
		
		//第二个图标
		$.ajax({
			type:"post",
			url:"/exam/findSTLB",
			async:true,
			success:function(data){

				option = {
//						title : {
//							text : '某站点用户访问来源',
//							subtext : '纯属虚构',
//							x : 'center'
//						},
						tooltip : {
							trigger : 'item',
							formatter : "{a} <br/>{b} : {c} ({d}%)"
						},
						legend : {
							orient : 'vertical',
							left : 'left',
							data : [ '文字题', '图片题']
						},
						series : [ {
							name : '试题信息',
							type : 'pie',
							radius : '55%',
							center : [ '50%', '60%' ],
							data : data,
							itemStyle : {
								emphasis : {
									shadowBlur : 10,
									shadowOffsetX : 0,
									shadowColor : 'rgba(0, 0, 0, 0.5)'
								}
							}
						} ]
					};
				myChart2.setOption(option);
			},
			error:function(data){
				
			}
		});
	});
	</script>
	<!-- 总结 -->
	<div style="padding-top: 20px">
	  			<div id="p" class="easyui-panel" title="试题分布"
				style="width:98%; height: 100px; padding: 10px; background: #fafafa; float: left;"
				data-options="iconCls:'icon-save',closable:false,
        collapsible:true,minimizable:false,maximizable:false">
				
			</div>
	</div>
	<!-- 
	[ {
								value : 335,
								name : '直接访问'
							}, {
								value : 310,
								name : '邮件营销'
							}, {
								value : 234,
								name : '联盟广告'
							}, {
								value : 135,
								name : '视频广告'
							}, {
								value : 1548,
								name : '搜索引擎'
							} ]
	 -->
</body>
</html>